<style rel="stylesheet/scss" lang="scss" scoped>
    .m-table {
        width: 100%;
        height: 500px;
		overflow: auto;
        background: #F0F0F0;
        padding: 10px;
        flex: 1;
        margin-top: 10px;
		.sx-box{
			width: 100px;
			height: 20px;
			color: #333;
		}
		.sc-box{
			width: 100%;
			height: 50px;
			display: flex;
			padding: 0 10px;
			align-items: center;
			background: #fff;
			border: 1px solid #ebeef5;
		}
    }
</style>
<template>
    <div class="m-table">
        <div>
            <el-button type="primary" size="mini">设置表头</el-button>
            <el-button type="primary" size="mini">设置属性值</el-button>
            <div class="m-t-10">
				<div class="sc-box">
					<screening :flag="item.showDrep" @hideDrep="hideDrep" :step="index" v-for="(item, index) in cheList"></screening>
				</div>
                <template>
                    <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column label="日期" width="120">
                            <template slot-scope="scope">
								{{ scope.row.date }}
							</template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
	import screening from './screening.vue'
    export default {
        data() {
            return {
				targetDrep:1,
				cheList: [
					{
						showDrep: false
					},
					{
						showDrep: false
					}
				],
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				],
				modelIds: '',
            }
        },
		created() {
			let _this = this
			document.onclick = function () {
				let e = e || window.event
				let el = e.srcElement.className
				console.log(el)
				if (el !== 'he-input' && el !== 'item-li' && el !== 'item-ul' && el != 'el-checkbox__label' && el != 'el-checkbox__original'  && el != 'load-more' && el != 'el-checkbox__inner') {
					console.log(444)
					_this.cheList.forEach((item) => {
						item.showDrep = false
					})
					return
				}
			}
			this._initProList()
		},
		methods: {
			hideDrep(num) {
				this.cheList.forEach((item) => {
					item.showDrep = false
				})
				this.cheList[num].showDrep = true
			},
			handleSelectionChange(val) {
				
			},
			_initProList() {
				this.$ajax({
					api: '_initProList',
					params: {
						page: this.page,
						pageSize: 10,
						modelIds: this.modelIds
					}
				}).then(res => {
					if(res.status === 200){}
				})
			}
		},
		components: {
			screening
		}
    }
</script>
